<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="formRef"
				:inline="true"
				:model="queryData"
				label-width="auto"
			>
				<!-- <el-row>
					<el-col :span="24" class="flex-warp-container"> -->
				<!--						<el-form-item-->
				<!--							:label="$t('common.belong_merchant') + ':'"-->
				<!--							class="flex-row-container"-->
				<!--							label-width="77px"-->
				<!--						>-->
				<!--							<merchant-select-->
				<!--								v-model="queryData.merchantId"-->
				<!--								:merchantInfo.sync="merchantObj"-->
				<!--							></merchant-select>-->
				<!--						</el-form-item>-->
				<el-form-item
					:label="$t('report.date') + ':'"
					label-width="48px"
				>
					<el-date-picker
						v-model="searchTime"
						type="daterange"
						range-separator="-"
						:start-placeholder="$t('report.start_date')"
						:end-placeholder="$t('report.end_date')"
						:picker-options="pickerShortcutWithCurrPeriod"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="$t('report.game_name') + ':'"
					label-width="77px"
				>
					<el-input
						v-model="queryData.gameTypeName"
						clearable
						:maxlength="20"
						v-input="{ name: 'includeSpaceValidate' }"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<!-- </el-col>
				</el-row>
				<el-row>
					<el-col :span="24" class="flex-warp-container"> -->
				<el-form-item
					:label="$t('report.game') + ':'"
					label-width="48px"
				>
					<el-checkbox
						:label="1"
						v-model="selectAllVenue"
						@change="checkAllData()"
					>
						{{ $t('operation.activity_list.all_select') }}
					</el-checkbox>
					<el-link
						type="primary"
						class="selfSelectGame"
						@click="showOptionalGameDialog"
					>
						{{ $t('report.optional_name') }}
					</el-link>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('701041')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<!-- <el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button> -->
				</el-form-item>
				<!-- </el-col>
				</el-row> -->
				<!-- <el-form-item :label="$t('report.venue_name') + ':'">
						<el-select
							v-model.trim="queryData.gameCode"
							size="medium"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in venueNameList"
								:key="item.id"
								:label="item.venueName"
								:value="item.gameCode"
							></el-option>
						</el-select>
					</el-form-item> -->
				<date-picker-shortcuts
					kind="shortcutForButtons"
					:action="handleShortcutBtnClick"
					:loading="loading"
				/>
			</el-form>
			<el-link :underline="false" type="danger">
				{{ $t('report.refresh_warning_text') }}
			</el-link>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				ref="elTable"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:max-height="tableHeight"
				:data="tableData"
				style="width: 100%"
				:key="headKey"
				v-bind="$attrs"
				v-on="$listeners"
				:cell-class-name="cellClassName"
				:header-cell-class-name="cellClassName"
				@sort-change="changeTableSort"
				show-summary
				:summary-method="
					(val) => handleRow(val, subSummary, totalSummary)
				"
				:header-cell-style="getRowClass"
				highlight-current-row
			>
				<el-table-column
					v-for="(item2, index2) in newCol"
					:key="item2.label"
					align="center"
					:label="item2.label"
				>
					<el-table-column
						v-for="(item, index) in item2.children"
						:key="'column_' + index"
						:prop="newCol[index2].children[index].prop"
						:align="item.alignCenter"
						:label="item.label"
						:min-width="item.minWidth"
						:fixed="false"
						:sortable="item.isSortColumn"
						:show-overflow-tooltip="item.isShowTip"
					>
						<!-- 通过插槽为表头绑定mousedown和dragover方法 -->
						<template slot="header" slot-scope="{ column, $index }">
							<span
								@mousedown="
									handleMounseDown($event, column, $index)
								"
								@dragover="
									handleDragover($event, column, $index)
								"
							>
								{{ item.label }}
							</span>
						</template>
						<template slot-scope="{ row }">
							<div v-if="item.solt === 'numberSolt'">
								{{
									handleNumber(
										'',
										row[
											newCol[index2].children[index].prop
										],
										0
									)
								}}
							</div>
							<div v-if="item.solt === 'amountSolt'">
								<p
									:style="
										item.soltColor
											? handleNumberColor(
													row[
														newCol[index2].children[
															index
														].prop
													]
											  )
											: ''
									"
								>
									{{
										handleTotalNumber(
											row.currency,
											row[
												newCol[index2].children[index]
													.prop
											]
										)
									}}
								</p>
							</div>
							<div v-if="item.solt === 'defaultSolt'">
								<span v-if="item.isAddColor">
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="dialogData(row)"
									>
										{{
											row[
												newCol[index2].children[index]
													.prop
											] || '-'
										}}
									</el-link>
								</span>
								<span v-else>
									{{
										row[
											newCol[index2].children[index].prop
										] || '-'
									}}
								</span>
							</div>
						</template>
					</el-table-column>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size.sync="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				(val) => {
					showDialog = val
				}
			"
		/>
		<!--设置列-->
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
			:before-close="cancleSetColumn"
			:close-on-click-modal="false"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(item, index) in oldCol"
				:key="index"
				class="setting-div"
			>
				<el-checkbox v-if="index !== 0" v-model="item.isShow">
					{{ item.label }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancleSetColumn()">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<!--自选游戏-->
		<el-dialog
			:title="$t('report.optional_name')"
			center
			:visible.sync="optionalGameDialog.visible"
			width="800px"
			class="setting-div"
		>
			<div
				v-if="selectGameList.length > 0"
				class="flex_columns_container"
			>
				<el-row>
					<el-col :span="3" class="text-right pr20">
						{{ $t('report.select_game') }}
					</el-col>
					<el-col :span="21">
						<el-checkbox
							v-model="selectAllVenue"
							@change="checkAllData()"
						>
							{{ $t('operation.activity_list.all_select') }}
						</el-checkbox>
					</el-col>
				</el-row>
				<div
					v-for="(item, index) in selectGameList"
					:key="index"
					class="mt10"
				>
					<el-row>
						<el-col :span="3" class="text-right pr20">
							{{ item.venueName }}
						</el-col>
						<el-col :span="21">
							<el-checkbox
								v-model="item.checkAllGame"
								@change="handleCheckAllChange($event, index)"
							>
								{{ $t('operation.activity_list.all_select') }}
							</el-checkbox>
						</el-col>
					</el-row>
					<div class="mt15"></div>
					<el-row>
						<el-col :span="21" class="flex_game_container">
							<el-checkbox-group
								v-model="item.checkedGameList"
								@change="
									handleCheckedCitiesChange(
										item.checkedGameList,
										index
									)
								"
							>
								<el-checkbox
									v-for="(itm, indexs) in item.gameTypeList"
									:label="itm.gameId"
									:key="indexs"
									class="mb10"
								>
									{{ itm.gameName }}
								</el-checkbox>
							</el-checkbox-group>
						</el-col>
					</el-row>
				</div>
				<el-divider></el-divider>
				<div
					slot="footer"
					class="dialog-footer text-center  mt30 footPos"
				>
					<el-button @click="optionalGameDialog.visible = false">
						{{ $t('member.close') }}
					</el-button>
					<el-button type="primary" @click="handleGameList">
						{{ $t('common.search') }}
					</el-button>
				</div>
			</div>
			<div v-else class="text-center mt30 mb30">
				{{ $t('report.no_game_data') }}
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
// import Sortable from 'sortablejs'
import { Storage } from '@/utils/compose'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import { getColumns } from './components/columns'
import MainContent from '@/components/MainContent/index.vue'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'
const start = dayjs()
	.startOf('day')
	.valueOf()
const end = dayjs()
	.endOf('day')
	.valueOf()
const setSearchTime = () => [
	dayjs()
		.startOf('day')
		.valueOf(),
	dayjs()
		.endOf('day')
		.valueOf()
]
export default {
	name: routerNames.gameProfitAndLoss,
	components: {
		DetailPage: () => import('./components/detail-page.vue'),
		MainContent,
		DatePickerShortcuts
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				gameTypeIds: []
			},
			searchTime: [start, end],
			selectAllVenue: true,
			gameList: [],
			selectAllStatus: [],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			checkAll: false,
			selectGameList: [],
			exportBtnLoading: false,
			loading: false,
			showDialog: false,
			optionalGameDialog: {
				visible: false
			},
			rowVal: {},
			// venueNameList: [],
			merchantObj: '',
			axiosDate: '',
			oldCol: [],
			dropCol: [],
			newCol: [],
			colSettings: {
				visible: false
			},
			// 拖拽状态
			dragState: {
				start: -3, // 起始元素的 index 防止初始化cellStyle时序号、展开等默认样式改变，最好小于-3
				end: -3, // 移动鼠标时所覆盖的元素 index
				dragging: false, // 是否正在拖动
				direction: undefined // 拖动方向
			},
			headKey: 'gameProfitAndLoss', // 表头数组变换位置时，重绘table（不更新该值，表头数组变化时，页面不会改变）
			scrollX: 0 // 初始x轴scroll位置（用于定位X轴滚动条）
		}
	},
	computed: {},
	watch: {
		oldCol: {
			handler(newVal) {
				if (newVal) {
					setTimeout(() => {
						this.newCol = newVal.filter((its) => {
							return its.isShow === true
						})
					}, 1000)
				}
			},
			deep: true
		}
	},
	created() {
		this.$store.dispatch('user/updateCurrentAccountPeriod')
		this.getGameList()
		const storageColumn = this.getSaveTableData()
		this.dropCol = getColumns()
		const uu_Id = this.$store.state.user.userInfo?.id
		this.oldCol =
			storageColumn &&
			storageColumn[`${uu_Id}_commonTableKey_gameProfitAndLoss`]
				? storageColumn[`${uu_Id}_commonTableKey_gameProfitAndLoss`]
				: this.dropCol
		this.newCol = this.oldCol
	},
	mounted() {},
	methods: {
		handleShortcutBtnClick(val) {
			this.searchTime = val
			this.search()
		},
		// 每一项中的全选
		handleCheckAllChange(val, index) {
			const arrList = []
			let allIs = true
			for (const item of this.selectGameList[index].gameTypeList) {
				arrList.push(item.gameId)
			}
			this.selectGameList[index].checkedGameList = val ? arrList : []
			if (val === true) {
				this.selectAllStatus.push(val)
				for (const index in this.selectGameList) {
					const e = this.selectGameList[index].checkAllGame
					if (!e) {
						allIs = false
						continue
					}
				}
				if (allIs) {
					this.selectAllVenue = true
				} else {
					this.selectAllVenue = false
				}
			} else {
				this.selectAllStatus.pop()
				this.selectAllVenue = false
			}
			let arr = []
			this.selectGameList.map((item) => {
				arr = arr.concat(item.checkedGameList)
			})
			this.queryData.gameTypeIds = arr
		},
		// 单个项选择
		handleCheckedCitiesChange(val, index) {
			const checkAllStatus = []
			this.selectGameList[index].checkAllGame =
				val.length === this.selectGameList[index].gameTypeList.length
			for (const item of this.selectGameList) {
				if (item.checkAllGame === true) {
					checkAllStatus.push(item.checkAllGame)
				}
			}
			if (checkAllStatus.length === this.selectGameList.length) {
				this.selectAllVenue = true
			} else {
				this.selectAllVenue = false
			}
			let arr = []
			this.selectGameList.map((item) => {
				arr = arr.concat(item.checkedGameList)
			})
			this.queryData.gameTypeIds = arr
		},
		// 全选
		checkAllData() {
			if (this.selectAllVenue === true) {
				this.queryData.gameTypeIds = []
				for (const item of this.selectGameList) {
					for (const itms of item.gameTypeList) {
						item.checkedGameList.push(itms.gameId)
						this.queryData.gameTypeIds.push(itms.gameId)
						item.checkAllGame = true
					}
				}
			} else {
				for (const item of this.selectGameList) {
					item.checkedGameList = []
					item.checkAllGame = false
				}
				this.queryData.gameTypeIds = []
			}
		},
		// 鼠标摁下触发
		handleMounseDown(e, column, $index) {
			this.dragState.dragging = true
			this.dragState.start = parseInt($index - 0)
			// 添加鼠标抬起事件  消除鼠标摁下立刻松开问题
			document.addEventListener('mouseup', this.handleMouseUp)
			// 添加拖拽结束事件
			document.addEventListener('dragend', this.handleMouseUp)
			// 对选中的表头允许其拖拽
			const dragclass = '.el-table__header-wrapper .' + column.id
			const dragDom = document.querySelectorAll(dragclass)
			dragDom.forEach((dom) => {
				// 允许表头块可以被拖拽 draggable 属性 不允许拖拽dragover等相关拖拽事件无法触发
				dom.setAttribute('draggable', true)
			})
		},
		/** 鼠标在拖拽移动时触发 */
		handleDragover(e, column, $index) {
			if (this.dragState.dragging) {
				// 获取当前滚动条的位置
				const scrollDom = this.$refs.elTable.bodyWrapper
				this.scrollX = scrollDom.scrollLeft
				const index = parseInt($index - 0) // 记录起始列
				/** 实时更改鼠标处于表头的位置 */
				if (index - this.dragState.start !== 0) {
					this.dragState.direction =
						index - this.dragState.start < 0 ? 'left' : 'right' // 判断拖动方向
					this.dragState.end = parseInt($index - 0)
				} else {
					this.dragState.end = this.dragState.start
					this.dragState.direction = null
				}
			}
		},
		/** 鼠标抬起或拖拽结束触发 */
		handleMouseUp() {
			// 更新拖拽后的表头
			this.headDraged(this.dragState)
			const { end } = this.dragState
			// 初始化拖动状态
			this.dragState = {
				start: end, // 记录最后拖动的位置
				end: -9,
				dragging: false,
				direction: undefined
			}
			document.removeEventListener('mouseup', this.handleMouseUp)
			document.removeEventListener('dragend', this.handleMouseUp)
			setTimeout(() => {
				// 重置拖拽状态
				this.dragState.start = -9
			}, 500)
		},
		// 更新拖拽后的表头
		headDraged({ start, end, direction }) {
			if (direction) {
				const originColumn = this.newCol[start]
				// 有位置交换时，原先位置的元素删除，再在目标处插入
				this.oldCol.splice(start, 1)
				this.oldCol.splice(end, 0, originColumn)
				this.headKey = new Date().getTime() + '' // 更新table key值
				const uu_Id = this.$store.state.user.userInfo.id
				const uidKey = uu_Id + '_commonTableKey_gameProfitAndLoss'
				const getLocalTableData = Storage.get('commonTableKey')
				if (getLocalTableData) {
					Storage.set(
						'commonTableKey',
						Object.assign(getLocalTableData, {
							[uidKey]: this.oldCol
						})
					)
				} else {
					Storage.set('commonTableKey', {
						[uidKey]: this.oldCol
					})
				}
				this.$nextTick(() => {
					// 因为表头重绘后滚动条会移到最左端初始位置，因此如果是在中间部分拖拽，还需要把滚动条在定位到该位置
					this.$refs.elTable.bodyWrapper.scrollLeft = this.scrollX
				})
			}
		},
		// 拖动虚线样式设置
		cellClassName({ columnIndex }) {
			const { start, end, direction } = this.dragState
			const target = columnIndex - 0
			if (target === start) {
				// 被移动的元素
				return 'drag_start'
			} else if (target === end) {
				// 要移动的位置
				return `drag_end_${direction}`
			}
			return ''
		},
		async getGameList() {
			const { data } = await this.$api.getReportGameList()
			if (data && data.gameList.length > 0) {
				for (const item of data.gameList) {
					Object.assign(item, {
						checkAllGame: false,
						checkedGameList: []
					})
					this.selectGameList.push(item)
				}
			}
			this.checkAllData()
			this.loadGameListData()
		},
		handleGameList() {
			if (this.queryData.gameTypeIds.length <= 0) {
				return this.$message.warning(
					this.$t('report.please_select_game')
				)
			} else {
				this.optionalGameDialog.visible = false
				this.pageNum = 1
				this.loadGameListData()
			}
		},
		// 显示自选游戏弹框
		showOptionalGameDialog() {
			this.optionalGameDialog.visible = true
		},
		changeTableSort({ column, prop, order }) {
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (column.order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadGameListData()
		},
		search() {
			if (
				this.queryData.gameTypeName &&
				this.queryData.gameTypeName !== 0
			) {
				this.queryData.gameTypeIds = []
				this.selectAllVenue = false
				for (const item of this.selectGameList) {
					item.checkAllGame = false
					item.checkedGameList = []
					for (const itms of item.gameTypeList) {
						if (itms.gameName === this.queryData.gameTypeName) {
							item.checkedGameList.push(itms.gameId)
							this.queryData.gameTypeIds.push(itms.gameId)
							itms.checkAllGame = true
						} else {
							itms.checkAllGame = false
						}
					}
				}
			}
			// else {
			// 	this.queryData.gameTypeIds = []
			// 	this.selectAllVenue = false
			// 	for (const item of this.selectGameList) {
			// 		item.checkedGameList = []
			// 		item.checkAllGame = false
			// 	}
			// 	this.queryData.gameTypeIds = []
			// }
			this.pageNum = 1
			this.loadGameListData()
		},
		loadGameListData() {
			if (+new Date() - 500 < this.axiosDate) return
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD'),
				...this.getParams()
			}
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	this.total = 0
			// 	return
			// }
			this.loading = true
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getReportGameProfitList(params)
				.then((res) => {
					this.loading = false
					this.axiosDate = +new Date()
					if (res.code === 200) {
						this.tableData = []
						this.tableData = res?.data?.record || []
						this.total = res?.data?.totalRecord || 0
						this.subSummary = res?.data?.summary || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
			this.$api
				.getReportGameProfitSummary(params)
				.then((res) => {
					this.loading = false
					if (res.code === 200) {
						this.totalSummary = res?.data || {}
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadGameListData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadGameListData()
		},
		dialogData(val) {
			const timeArr = this.searchTime || []
			this.pageNum = 1
			this.rowVal = {
				gameCode: val.gameCode,
				gameTypeId: val.gameTypeId,
				gameTypeName: val.gameTypeName,
				merchantId: val.merchantId,
				venueName: val.venueName,
				currency: this.merchantObj?.currency || '',
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD')
			}
			this.showDialog = true
		},
		reset() {
			this.pageNum = 1
			this.queryData = {}
			this.merchantObj = ''
			this.searchTime = setSearchTime()
			this.selectAllStatus = []
			this.selectAllVenue = true
			this.queryData.gameTypeIds = []
			for (const item of this.selectGameList) {
				for (const itms of item.gameTypeList) {
					item.checkedGameList.push(itms.gameId)
					this.queryData.gameTypeIds.push(itms.gameId)
					item.checkAllGame = true
				}
			}
			if (this.$refs.elTable) {
				this.$refs.elTable.clearSort()
			}
			this.loadGameListData()
		},
		handleExportExcel() {
			const timeArr = this.searchTime || []
			const params = {
				...this.queryData,
				startTime: dayjs(timeArr[0]).format('YYYY-MM-DD'),
				endTime: dayjs(timeArr[1]).format('YYYY-MM-DD')
			}
			// const min = dayjs(timeArr[0])
			// const max = dayjs(timeArr[1])
			// const day = dayjs(max).diff(min, 'day')
			// if (day >= 31) {
			// 	this.$message.warning(this.$t('report.31_day'))
			// 	return
			// }
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getReportGameProfitExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		},
		// 提交列设置数据
		handleOrderList() {
			this.colSettings.visible = false
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_gameProfitAndLoss'
			const getLocalTableData = Storage.get('commonTableKey')
			if (getLocalTableData) {
				Storage.set(
					'commonTableKey',
					Object.assign(getLocalTableData, {
						[uidKey]: this.oldCol
					})
				)
				this.oldCol = getLocalTableData[uidKey]
			} else {
				Storage.set('commonTableKey', {
					[uidKey]: this.oldCol
				})
			}
		},
		// 打开列设置弹框
		openColSettings() {
			this.colSettings.visible = true
		},
		// 取消列设置
		cancleSetColumn() {
			this.colSettings.visible = false
			const getLocalTableData = Storage.get('commonTableKey')
			const uu_Id = this.$store.state.user.userInfo.id
			const uidKey = uu_Id + '_commonTableKey_gameProfitAndLoss'
			if (getLocalTableData && getLocalTableData[uidKey]) {
				this.oldCol = getLocalTableData[uidKey]
			} else {
				this.oldCol.map((item, index) => {
					item.isShow = true
				})
			}
		},
		// 复原缺省
		clickDel() {
			this.oldCol.map((item, index) => {
				item.isShow = true
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.tips-box {
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -12px;
}
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
.footPos {
	position: sticky;
	z-index: 20;
	bottom: 0;
	background: #fff;
}
::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;
	> div {
		height: 100%;
	}
}
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
::v-deep .is-group th {
	background-color: #f5f7fa !important;
}
.selfSelectGame {
	line-height: normal;
	margin-left: 50px;
	margin-right: 60px;
}
.mb50 {
	margin-bottom: 15px;
}
.text-indents {
	text-indent: 28px;
}
.flex_game_container {
	padding-left: 93px;
}
.flex_columns_container {
	display: flex;
	flex-direction: column;
	height: 500px;
	overflow-y: auto;
	position: relative;
}
.venue_mar {
	margin-left: 28px;
}
.checkSelect {
	margin-left: 34px;
}
</style>
